<!--
 Copyright 2025 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<!-- Container to manage relative positioning of menus -->
<div class="relative w-full max-w-2xl">

  <!-- ============================================= -->
  <!-- 1. Main Prompt Card                         -->
  <!-- ============================================= -->
  <div class="relative z-10 w-full rounded-3xl bg-neutral-900 p-5 text-neutral-300 shadow-2xl">
    <div class="flex items-center justify-between">
      <!-- Top Left: Mode Selector -->
      <button
        (click)="toggleModeMenu(); $event.stopPropagation()"
        class="flex items-center gap-2 rounded-lg bg-neutral-800 px-4 py-2 text-sm font-medium transition-colors hover:bg-neutral-700"
      >
        <span>{{ mode }}</span>
        <!-- Chevron Icon -->
        <mat-icon
          class="transition-transform"
          [class.rotate-180]="isModeMenuOpen()"
        >
          expand_more
        </mat-icon>
      </button>

      <!-- Top Right: Status Chips -->
      <div class="flex items-center gap-2 text-sm">
        <div
          (click)="toggleSettingsMenu(); $event.stopPropagation()"
          class="flex items-center gap-1.5 rounded-md bg-neutral-800 px-2 py-1 cursor-pointer hover:bg-neutral-700"
        >
          <!-- Model Icon -->
          <ng-container *ngIf="getSelectedModelObject() as model">
            <img *ngIf="model.isImage && model.imageSrc" [src]="model.imageSrc" class="w-4 h-4 object-contain" alt="model icon">
            <mat-icon *ngIf="!model.isImage && !model.isSvg" class="!text-sm !h-4 !w-4 !flex !items-center !justify-center">{{
              model.icon || 'auto_awesome' }}</mat-icon>
            <mat-icon *ngIf="!model.isImage && model.isSvg && model.icon" [svgIcon]="model.icon || ''"
              class="!text-sm !h-4 !w-4 !flex !items-center !justify-center"></mat-icon>
          </ng-container>
          <span>{{ selectedGenerationModel }}</span>
        </div>
        <div
          (click)="toggleSettingsMenu(); $event.stopPropagation()"
          class="flex items-center gap-1.5 rounded-md bg-neutral-800 px-2 py-1 cursor-pointer hover:bg-neutral-700"
        >
          <mat-icon class="!text-sm !h-4 !w-4 !flex !items-center !justify-center">
            {{ aspectRatio.includes('16:9') ? 'crop_landscape' : 'crop_portrait' }}
          </mat-icon>
          x{{ outputs }}
        </div>
        <!-- Settings/Filter Icon Button -->
        <button
          (click)="toggleSettingsMenu(); $event.stopPropagation()"
          class="rounded-md bg-neutral-800 p-1 transition-colors hover:bg-neutral-700"
        >
          <mat-icon>tune</mat-icon>
        </button>
      </div>
    </div>

    <!-- Prompt Area -->
    <div class="mt-4">
      <textarea
        (input)="onPromptInput($event)"
        [ngModel]="prompt"
        class="w-full h-24 bg-transparent text-xl text-neutral-400 placeholder:text-neutral-600 focus:outline-none resize-none"
        [placeholder]="mode.includes('Image') ? 'Generate an image with text...' : 'Generate a video with text...'"
      ></textarea>
    </div>

    <!-- Bottom Row: Images & Submit -->
    <div class="flex flex-wrap items-end justify-between gap-y-4">
      <!-- Left: Drag-and-drop areas -->
      <div class="flex flex-wrap items-center gap-3">
        <!-- Frames to Video Inputs -->
        <ng-container *ngIf="mode === 'Frames to Video'">
          <div
            class="relative h-20 w-20 cursor-pointer rounded-xl border-2 border-dashed border-neutral-700 bg-neutral-800 transition-colors hover:border-neutral-500 hover:bg-neutral-700 flex items-center justify-center"
            (click)="openImageSelector.emit(1)"
            (dragover)="$event.preventDefault()"
            (drop)="$event.preventDefault(); openImageSelector.emit(1)"
          >
            <ng-container *ngIf="!image1Preview">
              <mat-icon class="text-neutral-500">add</mat-icon>
            </ng-container>
            <ng-container *ngIf="image1Preview">
              <img [src]="image1Preview" class="h-full w-full rounded-lg object-cover" />
              <button
                (click)="$event.stopPropagation(); clearImage.emit({num: 1, event: $event})"
                class="absolute -right-2 -top-2 rounded-full bg-neutral-900 p-0.5 text-neutral-400 hover:text-white"
              >
                <mat-icon class="!h-4 !w-4 text-sm">close</mat-icon>
              </button>
            </ng-container>
          </div>

          <mat-icon class="text-neutral-500">compare_arrows</mat-icon>

          <div
            class="relative h-20 w-20 cursor-pointer rounded-xl border-2 border-dashed border-neutral-700 bg-neutral-800 transition-colors hover:border-neutral-500 hover:bg-neutral-700 flex items-center justify-center"
            (click)="openImageSelector.emit(2)"
            (dragover)="$event.preventDefault()"
            (drop)="$event.preventDefault(); openImageSelector.emit(2)"
          >
            <ng-container *ngIf="!image2Preview">
              <mat-icon class="text-neutral-500">add</mat-icon>
            </ng-container>
            <ng-container *ngIf="image2Preview">
              <img [src]="image2Preview" class="h-full w-full rounded-lg object-cover" />
              <button
                (click)="$event.stopPropagation(); clearImage.emit({num: 2, event: $event})"
                class="absolute -right-2 -top-2 rounded-full bg-neutral-900 p-0.5 text-neutral-400 hover:text-white"
              >
                <mat-icon class="!h-4 !w-4 text-sm">close</mat-icon>
              </button>
            </ng-container>
          </div>
        </ng-container>

        <!-- Unified Ingredients Mode Inputs -->
        <ng-container *ngIf="mode === 'Ingredients to Video' || mode === 'Ingredients to Image'">
          <ng-container *ngIf="getSelectedModelObject() as model">
            <div
              class="relative h-20 w-20 cursor-pointer rounded-xl border-2 border-dashed border-neutral-700 bg-neutral-800 transition-colors hover:border-neutral-500 hover:bg-neutral-700 flex items-center justify-center"
              [class.opacity-50]="referenceImages.length >= model.capabilities.maxReferenceImages"
              (click)="referenceImages.length < model.capabilities.maxReferenceImages && openImageSelectorForReference.emit()"
              (dragover)="$event.preventDefault()"
              (drop)="$event.preventDefault(); onReferenceImageDrop.emit($event)"
            >
              <mat-icon class="text-neutral-500">add</mat-icon>
              <span class="absolute bottom-0 text-[10px] text-neutral-500">{{ referenceImages.length }}/{{
                model.capabilities.maxReferenceImages }}</span>
              </div>
              <!-- Show small previews of reference images -->
            <div class="flex flex-wrap gap-1">
              <div *ngFor="let ref of referenceImages; let i = index" class="relative h-12 w-12 flex-shrink-0">
                <img [src]="ref.previewUrl" class="h-full w-full rounded-lg object-cover" />
                <button (click)="$event.stopPropagation(); clearReferenceImage.emit({index: i, event: $event})"
                  class="absolute -right-1 -top-1 rounded-full bg-neutral-900 p-0.5 text-neutral-400 hover:text-white">
                  <mat-icon class="!h-3 !w-3 text-xs">close</mat-icon>
                </button>
                </div>
                </div>
                </ng-container>
        </ng-container>
        </div>

      <!-- Right: Generate Button -->
      <div class="flex items-center gap-2">
        <button
          mat-raised-button
          color="primary"
          (click)="rewriteClicked.emit()"
          [disabled]="isLoading"
          class="!rounded-full"
        >
          <mat-icon>drive_file_rename_outline</mat-icon>
          Rewrite
        </button>
        <button
          mat-raised-button
          class="!bg-white !rounded-full"
          (click)="generateClicked.emit()"
          [disabled]="isLoading"
        >
          <mat-icon svgIcon="gemini-spark-icon"></mat-icon>
          <span
            class="font-bold bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 bg-clip-text text-transparent"
          >
            Generate
          </span>
        </button>
      </div>
    </div>
  </div>

  <!-- ============================================= -->
  <!-- 2. Mode Selector Menu                         -->
  <!-- ============================================= -->
  @if (isModeMenuOpen()) {
    <div
      class="absolute left-0 bottom-full z-20 mb-2 w-64 rounded-xl bg-neutral-800 p-2 text-white shadow-lg"
    >
      @if (modes.length > 0) {
      @for (m of modes; track m.value) {
      <button (click)="selectMode(m.value)"
        class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left font-medium transition-colors"
        [class.bg-neutral-700]="mode === m.value" [class.hover:bg-neutral-700]="mode !== m.value">
        <mat-icon [fontIcon]="m.icon"></mat-icon>
        <span>{{ m.label }}</span>
      </button>
      }
      } @else {
        <button (click)="selectMode('Text to Video')"
          class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left font-medium transition-colors"
          [class.bg-neutral-700]="mode === 'Text to Video'" [class.hover:bg-neutral-700]="
                    mode !== 'Text to Video'
                  ">
          <!-- Mode Icon 1 -->
          <mat-icon>text_fields</mat-icon>
          <span>Text to Video</span>
        </button>
        <button (click)="selectMode('Frames to Video')"
          class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left font-medium transition-colors"
          [class.bg-neutral-700]="mode === 'Frames to Video'" [class.hover:bg-neutral-700]="
                    mode !== 'Frames to Video'
                  ">
          <!-- Mode Icon 2 -->
          <mat-icon fontIcon="image"></mat-icon>
          <span>Frames to Video</span>
        </button>
        <button (click)="selectMode('Ingredients to Video')"
          class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left font-medium transition-colors"
          [class.bg-neutral-700]="
                                                                                                            mode === 'Ingredients to Video'
                  " [class.hover:bg-neutral-700]="
                    mode !== 'Ingredients to Video'
                  ">
          <!-- Mode Icon 3 -->
          <mat-icon fontIcon="image_search"></mat-icon>
          <span>Ingredients to Video</span>
        </button>
      }
    </div>
  }

  <!-- ============================================= -->
  <!-- 3. Settings Menu                              -->
  <!-- ============================================= -->
  @if (isSettingsMenuOpen()) {
    <div
      class="absolute right-0 bottom-full z-20 mb-2 w-[500px] rounded-xl bg-neutral-800 p-4 text-white shadow-lg"
    >
      <div class="grid grid-cols-2 gap-3">
        <!-- Aspect Ratio Dropdown -->
        <div class="relative">
          <label
            for="aspect-ratio"
            class="block text-xs font-medium text-neutral-400 mb-1.5"
            >Aspect Ratio</label
          >
          <button
            (click)="
              $event.stopPropagation();
              isSettingsDropdownOpen.set(
                isSettingsDropdownOpen() === 'aspect' ? null : 'aspect'
              )
            "
            class="relative w-full flex items-center justify-between rounded-lg bg-neutral-700 px-3 py-2 text-left text-sm"
          >
            <span class="flex items-center gap-2 min-w-0">
              <!-- Landscape Icon -->
              <mat-icon class="flex-shrink-0">
                {{ aspectRatio.includes('16:9') ? 'crop_landscape' : 'crop_portrait' }}
              </mat-icon>
              <span class="truncate whitespace-nowrap">{{ aspectRatio }}</span>
            </span>
            <mat-icon
              class="transition-transform"
              [class.rotate-180]="isSettingsDropdownOpen() === 'aspect'"
            >
              expand_more
            </mat-icon>
          </button>
          @if (isSettingsDropdownOpen() === 'aspect') {
            <div
              class="absolute left-0 top-full z-30 mt-1 w-full rounded-lg bg-neutral-700 p-1 shadow-lg max-h-60 overflow-y-auto"
            >
              @if (aspectRatioOptions.length > 0) {
              @for (option of aspectRatioOptions; track option.value) {
              <button (click)="selectNewAspectRatio(option.value)"
                class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600" [disabled]="option.disabled"
                [class.opacity-50]="option.disabled" [class.cursor-not-allowed]="option.disabled">
                <div class="flex items-center gap-2 whitespace-nowrap">
                  <mat-icon>{{ option.icon || 'crop_landscape' }}</mat-icon>
                  {{ option.viewValue.replace('\n', '') }}
                </div>
              </button>
              }
              } @else {
              <button (click)="selectNewAspectRatio('16:9')"
                class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600">
                <div class="flex items-center gap-2 whitespace-nowrap">
                  <mat-icon>crop_landscape</mat-icon>
                  Horizontal (16:9)
                </div>
              </button>
                <button (click)="selectNewAspectRatio('9:16')"
                  class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600">
                  <div class="flex items-center gap-2 whitespace-nowrap">
                    <mat-icon>crop_portrait</mat-icon>
                    Vertical (9:16)
                  </div>
                </button>
              }
            </div>
          }
        </div>

        <!-- Outputs Dropdown -->
        <div class="relative">
          <label
            for="outputs"
            class="block text-xs font-medium text-neutral-400 mb-1.5"
            >Outputs per prompt</label
          >
          <button
            (click)="
              $event.stopPropagation();
              isSettingsDropdownOpen.set(
                isSettingsDropdownOpen() === 'outputs' ? null : 'outputs'
              )
            "
            class="relative w-full flex items-center justify-between rounded-lg bg-neutral-700 px-3 py-2 text-left text-sm"
          >
            <span>{{ outputs }}</span>
            <mat-icon
            class="transition-transform"
            [class.rotate-180]="isSettingsDropdownOpen() === 'outputs'"
          >
            expand_more
          </mat-icon>
          </button>
          @if (isSettingsDropdownOpen() === 'outputs') {
            <div
              class="absolute right-0 top-full z-30 mt-1 w-full rounded-lg bg-neutral-700 p-1 shadow-lg"
            >
              <button
                (click)="selectOutputs(1)"
                class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600"
              >
                1
              </button>
              <button
                (click)="selectOutputs(2)"
                class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600"
              >
                2
              </button>
              <button
                (click)="selectOutputs(3)"
                class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600"
              >
                3
              </button>
              <button
                (click)="selectOutputs(4)"
                class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600"
              >
                4
              </button>
            </div>
          }
        </div>
      </div>

      <!-- Model Dropdown -->
      <div class="relative mt-3">
        <label
          for="model"
          class="block text-xs font-medium text-neutral-400 mb-1.5"
          >Model</label
        >
        <button
          (click)="
            $event.stopPropagation();
            isSettingsDropdownOpen.set(
              isSettingsDropdownOpen() === 'model' ? null : 'model'
            )
          "
          class="relative w-full flex items-center justify-between rounded-lg bg-neutral-700 px-3 py-2 text-left text-sm"
        >
          <span>{{ selectedGenerationModel }}</span>
          <mat-icon
            class="transition-transform"
            [class.rotate-180]="isSettingsDropdownOpen() === 'model'"
          >
            expand_more
          </mat-icon>
        </button>
        @if (isSettingsDropdownOpen() === 'model') {
          <div
            class="absolute left-0 top-full z-30 mt-1 w-full rounded-lg bg-neutral-700 p-1 shadow-lg max-h-80 overflow-y-auto"
          >
            <button
              *ngFor="let model of generationModels"
              (click)="selectInternalModel(model)"
              class="block w-full px-3 py-1.5 text-left text-sm rounded hover:bg-neutral-600 whitespace-pre-wrap"
              [ngClass]="{
                'bg-neutral-600':
                  selectedGenerationModel === model.viewValue,
              }"
            >
              <div class="flex items-center gap-2">
                @if (model.isImage) {
                <img [src]="model.imageSrc" class="h-5 w-5 object-contain" alt="model icon" />
                } @else if (model.isSvg) {
                <mat-icon [svgIcon]="model.icon || ''" class="!h-5 !w-5"></mat-icon>
                }
                {{ model.viewValue }}
              </div>
            </button>
          </div>
        }
      </div>
    </div>
  }

</div>